<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery效果的demo</title>
    <script src="js/jq.js"></script>
    <script src="js/jquery.animate-colors.js"></script>
    <script src="js/jqueryrotate.js"></script>
</head>
<body>
<div style="width: 600px;margin: 0 auto">
    <p>jquery选择器及动画效果demo</p>
    <input id="divS" type="button" value="双击显示/隐藏九宫格,单击 鼠标移动效果"/>
    <input id="stopA" type="button" value="滑动效果"/>
    <input id="special" type="button" value="随机改变颜色效果"/>
    <input id="game" type="button" value="游戏模式"/>
</div>
<div id="div">
    <div id="div1">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="div2">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="div3">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #div {
        width: 600px;
        height: 600px;
        margin: 100px auto
    }

    #div div {
        width: 600px;
        height: 200px;
        float: right
    }

    #div div div {
        width: 198px;
        height: 198px;
        border: 1px solid #62615f;
    }
</style>
<script>
    //停止动画
    $("#stopA").click(function () {
        $("#div").slideToggle(2000);
    })
    //    双击显示隐藏面板
    $("#divS").dblclick(function () {
        $("#div").slideToggle();
    });
    $("#divS").click(function () {
        //    鼠标移入方块就消失，移走就显示
        $("#div div div").mouseenter(function () {
            $(this).hide(1000)
        })
        $("#div div div").mouseleave(function () {
            $(this).show(1000)
        })
    })

    var colors=['blue','yellow','red','block','white'];

    $("#special").click(function(){
        for(var i=0;i<9;i++){
            $("#div div div").eq(i).animate({
                backgroundColor:getColor()
            })
        }

    });
//    获取随机颜色
        getColor=function(){
        var  str='#'+Math.floor(Math.random()*1000);
        if(str.length<4){
            str='#524'
        }
        return str
    };

//    游戏模式
    var img="<img class='img' src='img/shrewmouse.jpg'style='width: 180px;height: 180px'/>"
    $('#game').click(function(){
//        $('body').everyTime('1s', function () {
//
//        })
        var count=0;
        var interval1=setInterval('showMouse()',2000)
        var interval2=setInterval(function(){
            $(".img").click(function(){
                $(this).remove();
                count++;
            });
            if($(".img").length>=2){
                clearInterval(interval1);
                alert("game Over"+"您的得分："+count);
                clearInterval(interval2);
            }
        },1800)

    });
//显示老鼠
   showMouse=function(){
       setTimeout(function(){
           var  i=Math.floor(Math.random()*10);
           $("#div div div").eq(i).append(img);
           $("img").rotate({
               angle: 0,
               animateTo: 360,
               duration:2000
           })
       },1000)
   }





</script>
</body>
</html>